import AvatarController from './avatar.js';
import ChatManager from './chat.js';

document.addEventListener('DOMContentLoaded', function() {
    // 初始化3D模型
    const avatar = new AvatarController();
    
    // 初始化聊天管理器
    const chatManager = new ChatManager();

    // 获取DOM元素
    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');
    const voiceButton = document.getElementById('voice-button');

    // 添加静音按钮控制
    const muteButton = document.getElementById('mute-button');
    let isMuted = false;

    muteButton.addEventListener('click', function() {
        isMuted = !isMuted;
        muteButton.textContent = isMuted ? '取消静音' : '静音';
        muteButton.classList.toggle('active', isMuted);
        
        if (isMuted) {
            chatManager.speechSynthesis.cancel(); // 停止当前语音
        }
    });

    // 发送消息事件
    sendButton.addEventListener('click', function() {
        const message = messageInput.value.trim();
        if (message) {
            chatManager.sendMessage(message);
            messageInput.value = '';
            // 触发表情变化
            avatar.updateExpression('happy');
        }
    });

    // 语音按钮事件
    voiceButton.addEventListener('click', function() {
        chatManager.startSpeechRecognition();
    });

    // 添加键盘事件
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendButton.click();
        }
    });

    // 添加键盘控制
    document.addEventListener('keydown', (event) => {
        if (!avatar.avatar) return;
        
        switch(event.key) {
            case 'ArrowLeft':
                avatar.avatar.rotation.y += 0.1;
                break;
            case 'ArrowRight':
                avatar.avatar.rotation.y -= 0.1;
                break;
            case 'ArrowUp':
                avatar.avatar.position.z -= 0.1;
                break;
            case 'ArrowDown':
                avatar.avatar.position.z += 0.1;
                break;
        }
    });

    // 添加按钮控制
    const controls = document.createElement('div');
    controls.className = 'avatar-controls';
    controls.innerHTML = `
        <button id="rotate-left">←</button>
        <button id="rotate-right">→</button>
    `;
    document.getElementById('avatar-container').appendChild(controls);

    document.getElementById('rotate-left').onclick = () => {
        if (avatar.avatar) avatar.avatar.rotation.y += 0.2;
    };
    document.getElementById('rotate-right').onclick = () => {
        if (avatar.avatar) avatar.avatar.rotation.y -= 0.2;
    };
}); 